import React, { useEffect, useRef } from "react"
import { useNavigate } from "react-router-dom"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { SelectedPage } from "../../shared/types"
import equipmentImage from "../../assets/image/exercise.png"

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger)

type Props = {
  setSelectedPage: (value: SelectedPage) => void
}

const EquipmentSection: React.FC<Props> = ({ setSelectedPage }) => {
  const navigate = useNavigate()
  const sectionRef = useRef<HTMLElement>(null)
  const leftImageRef = useRef<HTMLDivElement>(null)
  const rightCardsRef = useRef<HTMLDivElement>(null)
  const card1Ref = useRef<HTMLDivElement>(null)
  const card2Ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      // 设置初始状态
      gsap.set([leftImageRef.current, card1Ref.current, card2Ref.current], {
        opacity: 0,
        y: 50
      })

      // 创建时间线
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          end: "bottom 20%",
          onEnter: () => setSelectedPage(SelectedPage.Equipment),
          once: true
        }
      })

      // 添加动画序列
      tl.to(leftImageRef.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      })
      .to(card1Ref.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.4")
      .to(card2Ref.current, {
        opacity: 1,
        y: 0,
        duration: 0.6,
        ease: "power2.out"
      }, "-=0.4")

    }, sectionRef)

    return () => ctx.revert()
  }, [setSelectedPage])

  return (
    <section ref={sectionRef} id="equipment" className="w-full min-h-screen bg-white py-20 px-4">
      <div className="max-w-7xl mx-auto">
        {/* 标题区域 */}
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-primary-500 mb-4">专业器材设备</h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            广东海洋大学体育馆提供一流的器材设备，帮助您更便捷更有效的锻炼身体。我们真诚关心每一位学生的健康成长。
          </p>
        </div>

        {/* 主要内容区域 */}
        <div className="flex flex-col lg:flex-row items-center gap-12">
          {/* 左侧图片 */}
          <div ref={leftImageRef} className="lg:w-1/2">
            <div className="relative">
              <img 
                src={equipmentImage} 
                alt="体育馆器材" 
                className="w-full h-[500px] object-cover rounded-lg shadow-2xl"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-lg"></div>
            </div>
          </div>

          {/* 右侧卡片区域 */}
          <div ref={rightCardsRef} className="lg:w-1/2 space-y-6">
            {/* 卡片1 - 器材种类 */}
            <div ref={card1Ref} className="bg-white border border-gray-200 rounded-lg p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-primary-500">丰富器材种类</h3>
              </div>
              <p className="text-gray-600 mb-4">
                广东海洋大学体育馆器材种类繁多，包含羽毛球拍、乒乓球拍、篮球、排球、足球、网球、高尔夫球、保龄球、台球、健身器材等，您可以申请使用相关的器材，以便于您的教学计划或者训练计划。
              </p>
              <button
                className="text-primary-500 cursor-pointer hover:text-primary-600 font-semibold underline transition-colors duration-300"
                onClick={() => navigate('/equipment')}
              >
                了解更多
              </button>
            </div>

            {/* 卡片2 - 专业维护 */}
            <div ref={card2Ref} className="bg-white border border-gray-200 rounded-lg p-8 shadow-lg hover:shadow-xl transition-shadow duration-300">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-primary-500">专业维护保养</h3>
              </div>
              <p className="text-gray-600 mb-4">
                所有器材均经过专业团队定期维护保养，确保设备安全可靠、性能优异。
                我们承诺为您提供最安全、最舒适的运动环境。
              </p>
              <button
                className="text-primary-500 cursor-pointer hover:text-primary-600 font-semibold underline transition-colors duration-300"
                onClick={() => navigate('/equipment')}
              >
                了解更多
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default EquipmentSection


